1. Layouts 🔗

You can create layout blocks by using the following tokens:

• #+LAYOUT_BEGIN <layout_name> Starts layout <layout_name>
• #+LAYOUT_NEXT Advances layout to the next block
• #+LAYOUT_END Ends last created layout

Here's an example of what you can do using layouts (with flashy colors for show):

Given by the following code:

1

#+LAYOUT_BEGIN[style=background-color:#F00;flex:0.5] Split

2

First

3

	#+LAYOUT_BEGIN[style=background-color:#FF0] Centered

4

		Second

5

	#+LAYOUT_END

6

#+LAYOUT_NEXT[style=background-color:#00F]

7

	Third

8

	#+LAYOUT_BEGIN[style=background-color:#0FF] Split

9

		Fourth

10

	#+LAYOUT_NEXT[style=background-color:#0F0]

11

		Fifth

12

	#+LAYOUT_END

13

#+LAYOUT_END

(indentation is for readability)

2. Available layouts 🔗

2.1. Centered 🔗

Centered layout align text to the center of the current block.

Style 🔗

The Centered layout uses the .centered css class to center the text.

Properties 🔗

• style Added css style to the div (defaults to none)

2.2. Split 🔗

Style 🔗

The Split layout uses the .split-container and .split css class to create the desired layout. If you wish to modify the relative width of the splits: add style=flex: 0.5 in the properties, this makes the following split half the width of the other splits.

Properties 🔗

• style Added css style to the div (defaults to none)

2.3. Spoiler 🔗

The spoiler layout creates a collapsed element which can be opened.

Style 🔗

The Spoiler layout uses the .spoiler class, combined with <details>/<summary> to create the desired layout.

Properties 🔗

• title The spoiler title